<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { ref } from 'vue'
import SlideEntry from '../components/slide-entry.vue'
import SlideMap from '../components/slide-map.vue'
import SlideImage from '../components/slide-image.vue'
import SlidePhoto from '../components/slide-photo.vue'
import SlideMore from '../components/slide-more.vue'
import ImageViewer from '../components/viewer.vue'

await AMapLoader.load({
  key: '2121241c3571396e81f149f3c8aea1a4', // 申请好的Web端开发者Key，首次调用 load 时必填
  version: '2.0',
  Loca: {
    version: '2.0.0'
  }
})

const isMobile = window.matchMedia('(pointer:coarse)').matches
const slide = ref('entry')
const image = ref(null)
function openImageViewer (value) {
  image.value = value
}
function closeImageViewer () {
  image.value = null
}
</script>

<template>
  <q-page id="container" class="justify-center">
    <q-carousel
      v-model="slide"
      vertical
      transition-prev="slide-down"
      transition-next="slide-up"
      animated
      control-color="black"
      :navigation="!isMobile"
      arrows
      height="100vh"
    >
      <template #navigation-icon="{ active, btnProps, onClick }">
        <q-btn v-if="active" size="sm" :icon="btnProps.icon" color="black" flat round dense @click="onClick" />
        <q-btn v-else size="sm" icon="radio_button_unchecked" color="black" flat round dense @click="onClick" />
      </template>
      <q-carousel-slide name="entry" class="relative-position overflow-hidden q-pa-none" style="background-color: #f1edec">
        <slide-entry @togglePage="value => slide = value" />
      </q-carousel-slide>
      <q-carousel-slide name="map" class="relative-position q-pa-none" style="background-color: #1f5354">
        <slide-map @openImage="openImageViewer" />
      </q-carousel-slide>
      <q-carousel-slide name="image" class="q-pa-none">
        <slide-image @openImage="openImageViewer" />
      </q-carousel-slide>
      <q-carousel-slide name="photo" class="q-pa-none">
        <slide-photo @openImage="openImageViewer" />
      </q-carousel-slide>
      <q-carousel-slide name="more" class="q-pa-none">
        <slide-more @openImage="openImageViewer" />
      </q-carousel-slide>
    </q-carousel>
    <image-viewer v-if="image" :image="image" @close="closeImageViewer" />
  </q-page>
</template>
